<template>
	<view>
		<template v-if="person === 'government' || person === '兽医' ">
			<!-- <view style="display: flex; width: 750rpx; height: 136rpx; background: #4AC997; justify-content: center; align-items: flex-end;">
				<text style="font-size: 32rpx; color: white; font-weight: 400; margin-bottom: 20rpx;">畜牧生产管理</text>
			</view> -->
			<view class="searchModel">
				<input disabled="true" @tap="toSearch()" placeholder-style="font-size:30rpx;" placeholder="搜索养殖场" />
				<text class="icon iconfont icon-search "></text></view>
			<view class="scan">
				<image @tap="scanQR()" src="../../static/productionAdmin/scan.png" style="width: 60rpx; height: 60rpx; " mode="aspectFit"></image>
			</view>
			<!-- 定位 -->
			<view class="location">
				<image src="../../static/common/location.png"></image>
				<text>{{currentLocation}}</text>
				<text v-if="currentLocationNext" style="margin: 0rpx 10rpx;">---</text>
				<text v-if="currentLocationNext">{{currentLocationNext}}</text>
			</view>
			<!-- 滚动栏 -->
			<view class="uni-tab-bar">
				<scroll-view scroll-x class="uni-swiper-tab" scroll-with-animation :scroll-left="scrollLeft">
					<block v-for="(tab,index) in tabBars" :key="index">
						<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)" :id="'top'+ index">
							{{tab.name}}
						</view>
					</block>
				</scroll-view>
			</view>
			<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change='tabChange'>
				<swiper-item v-for="(items,index) in nextTabList " :key='index'>
					<scroll-view scroll-y class="scrollView" style="height: 100%;">
						<template v-if="load">
						<!-- 当前所属位置其内养殖场 -->
						<block v-for="(item,index2) in nextList" :key="index2">
							<view class="dataView">
								<view class="dataViewNav"><text>{{item.name}}</text><text v-if="isTown"  @tap="searchNextFarmer(item.name,index2)">查看更多</text></view>
								<view class="dataViewBox">
									<block v-for="(data,index3) in item.farm" :key="index3">
										<text @tap="chooseFarm(data.farmName,data.farmId)">{{data.farmName}}</text>
									</block>
								</view>
							</view>
						</block>
						</template>
						<template v-else>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</template>
		<template v-else-if="person === 'livestock'">
			<view class="farmers">
				<view>
					<image src="../../static/rear/banner.png" style="height: 250rpx; width: 750rpx;" mode="aspectFill"></image>
				</view>
				<view style="width: 700rpx; border-bottom: #F0F0F0 solid 2rpx; margin-bottom: 20rpx; padding-bottom: 20rpx; margin-top: 10rpx;">
					<text style="border-left: #07D188 solid 8rpx; padding-left: 20rpx; font-weight: bold; font-size: 32rpx;">{{this.User.userInfo.farm_name}}</text>
				</view>
				<view class="farmersButton">
					<view class="button1 animated bounceInLeft slow" @click="clickTo(1)">
						<image src="../../static/rear/a.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>生猪基本信息管理</text>
					</view>
					<view class="button2 animated bounceInRight slow" @click="clickTo(2)">
						<image src="../../static/rear/b.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>饲养情况管理</text>
					</view>
					<view class="button3 animated bounceInLeft slow" @click="clickTo(3)">
						<image src="../../static/rear/c.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>饲养饲料管理</text>
					</view>
					<view class="button4 animated bounceInRight slow" @click="clickTo(4)">
						<image src="../../static/rear/d.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>疾病防治药品管理</text>
					</view>
					<view class="button5 animated bounceInLeft slow" @click="clickTo(5)">
						<image src="../../static/rear/e.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>消毒管理</text>
					</view>
					<view class="button6 animated bounceInRight slow" @click="clickTo(6)">
						<image src="../../static/rear/f.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>生猪生长环境管理</text>
					</view>
					<view class="button7 animated bounceInLeft slow" @click="clickTo(7)">
						<image src="../../static/rear/g.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>猪栏管理</text>
					</view>
					<view class="button8 animated bounceInRight slow" @click="clickTo(8)">
						<image src="../../static/rear/h.png" style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
						<text>养殖仓管理</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view style="margin-top: 50%; display: flex; flex-wrap: wrap; width: 750rpx; height: 128rpx; justify-content: center;">
				<image src="../../static/rear/refuse.png" style="width: 128rpx; height: 128rpx;" mode="aspectFit"></image>
				<text style="line-height: 128rpx; margin-left: 20rpx; font-size: 32rpx;">您的权限不够哦！</text>
			</view>
		</template>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import townListData from '@/components/town-farm-data/town-farm-data.vue';
	export default {
		data() {
			return {
				scrollLeft: 0,
				isShow: false,
				person: '',
				currentLocation: '',
				currentLocationNext: '',
				swiperHeight: 1000,
				tabIndex: 0,
				tabBars: [], //滚动栏选项
				isTown: true, //判断是否处于镇级
				nextTabList: [], //临时下级县镇村
				nextList: [], //当前县镇村
				isBan: false, //是否拥有养殖仓
				load:true
			}
		},
		components: {
			townListData
		},
		onLoad() {
			//获取屏幕可使用高度
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(145)
				// console.log(this.swiperHeight)
				}
			});
		},
		onShow() {

		},
		created() {
			this.getRole()
		},
		onReady() {
			//获取所有地址
			if(this.person == 'government'){
				this.gerFarmCounty()
			}else{
				// this.checkWareHouse()
			}
		},
		components: {
			simpleAddress,
			townListData
		},
		methods: {
			//检查是否拥有养殖仓
			checkWareHouse() {
				uni.request({
					url: this.confige.webUrl + '/livestock/selWarehouse',
					data: {
						farm_id: this.User.userInfo.farm_id
					},
					header: {
						"X-Token": this.User.token
					},
					success: (res) => {
						console.log(res)
						if (res.data.result == null) {
							uni.showModal({
								title: '提示',
								content: '请先添加养殖仓',
								showCancel: false
							})
						} else {
							uni.navigateTo({
								url: './farmer/livestock_tag'
							})
						}
					}
				})
			},
			//政府点击扫码
			scanQR() {
				uni.scanCode({
					success: (res) => {
						this.arr = JSON.parse(res.result);
						//console.log(res.result)
						console.log(this.arr)
						uni.navigateTo({
							url: './governmentAndVeterinary/farm?farmName=' + this.arr.farmName + '&farmId=' + this.arr.farmId
						})
					}
				});
			},
			//养殖户按钮跳转
			clickTo(val) {
				switch (val) {
					case 1:
					this.checkWareHouse();
						
						break;
					case 2:
						uni.navigateTo({
							url: './farmer/livestock_look'
						})
						break;
					case 3:
						uni.navigateTo({
							url: './farmer/feedManagement'
						})
						break;
					case 4:
						uni.navigateTo({
							url: './farmer/drugs'
						})
						break;
					case 5:
						uni.navigateTo({
							url: './farmer/disinfection'
						})
						break;
					case 6:
						uni.navigateTo({
							url: './farmer/environment'
						})
						break;
					case 7:
						uni.navigateTo({
							url: './farmer/pigstyManagement'
						})
						break;
					default:
						uni.navigateTo({
							url: './farmer/warehouseManagement'
						})
						break;
				}
			},
			//前往搜索
			toSearch() {
				uni.navigateTo({
					url: "./search/search"
				})
			},
			//获取用户角色
			getRole() {
				this.person = this.User.userRight.name;
				// console.log(this.person)
			},

			//政府兽医选择养殖场查看
			chooseFarm(farmName, farmId) {
				console.log(farmName, farmId)
				uni.navigateTo({
					url: 'governmentAndVeterinary/farm?farmName=' + farmName + '&farmId=' + farmId
				})
			},

			//获取所有地址
			gerFarmCounty() {
				//console.log(1)
				uni.request({
					url: this.confige.webUrl + "/statistics/getBipolarRegion",
					data: {},
					header: {
						'X-Token': this.User.token
					},
					success: (res) => {
						console.log(res)
						var arr = [];
						var list = res.data.result;
						for (let i = 0; i < list.length; i++) {
							if (list[i]) {
								arr.push({
									name: list[i].name
								})
							}
						};
						this.tabBars = arr;
						this.nextTabList = list;
						console.log(this.tabBars)
						//根据当前县获取下级所有镇养殖场
						this.searchNextFarmer();
					}
				})
			},
			//根据当前县获取下级所有镇养殖场
			searchNextFarmer(farmTown, index) {
				// console.log(11)
				//定位市
				this.load = false;
				this.isTown = true;
				this.currentLocation = this.tabBars[this.tabIndex].name;
				//
				this.currentLocationNext = farmTown
				uni.request({
					url: this.confige.webUrl + "/statistics/getVillageList",
					data: {
						farmCounty: this.tabBars[this.tabIndex].name,
						farmTown: farmTown
					},
					header: {
						'X-Token': this.User.token
					},
					success: (res) => {
						console.log(res)
						if (!farmTown) {
							var list = res.data.result[0].list; //根据地址回执数组
							var list1 = this.nextTabList[this.tabIndex].nextCity; //当前县下拥有的镇
							for (let y = 0; y < list1.length; y++) {
								list1[y]['farm'] = []
								for (let i = 0; i < list.length; i++) { //判断回执
									if (list[i].farmTown === list1[y].name) {
										var farm = list1[y].farm;
										farm.push({
											farmTown: list[i].farmTown,
											farmId: list[i].farmId,
											farmName: list[i].farmName
										})
									}
								}
							}
							this.nextList = list1
							setTimeout(()=>{
								this.load = true
							},100)
						} else if (farmTown) {
							// console.log(res)
							this.isTown = false;
							var list = res.data.result[0].list; //根据地址回执数组
							var list1 = this.nextTabList[this.tabIndex].nextCity[index].nextCity; //当前选中县下的镇
							console.log(list1)
							for (let y = 0; y < list1.length; y++) {
								list1[y]['farm'] = []
								for (let i = 0; i < list.length; i++) { //判断回执
									if (list[i].farmVillage === list1[y].name) {
										var farm = list1[y].farm;
										farm.push({
											farm: list[i].farmVillage,
											farmId: list[i].farmId,
											farmName: list[i].farmName
										})
									}
								}
							}
							// console.log(list1)
							this.nextList = list1
							setTimeout(()=>{
								this.load = true
							},100)
						}
					}
				})
			},
			// 顶部选项卡选中
			tabtap(e) {
				this.tabIndex = e;
				this.scrollLeft = (e - 1) * 60
				this.searchNextFarmer();
			},
			//滑动监听事件
			tabChange(e) {
				this.tabIndex = e.detail.current;
				this.scrollLeft = (e.detail.current - 1) * 60
			    this.searchNextFarmer()
			}
		}

	}
</script>

<style lang="less">
	@import "../../common/global.less";
	@import "../../common/animate.css";
	@import "../../common/iconfont.css";
	@import "../../common/uni.css";

	//政府、兽医
	.headContent {
		height: auto;
		width: 750rpx;
	}
//选项下方区域
	.scrollView {
		width: 98%;
		margin: auto;
		height: 100%;
	}
	.scan {
		position: absolute;
		right: 0;
		top: 0;
		margin: 22rpx 15rpx;
	}

	.scroll {
		width: 750rpx;
		height: auto;
		scroll-y: true;
	}


	// 位置
	.location {
		height: 60rpx;
		display: flex;
		align-items: center;
		transform: translate(0rpx, 20rpx);

		>image {
			height: 50rpx;
			width: 50rpx;
		}

		>text {
			line-height: 50rpx;
			color: #000000;
		}
	}

	.searchModel {
		position: relative;
		width: 75%;
		margin: 20rpx auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 5rpx;
		height: 60rpx;
		border: 2rpx solid #C3EDDD;
		border-radius: 60rpx;
		color: #717171;

		>input {
			width: 85%;
		}

		>text {
			font-size: 35rpx;
		}
	}

	//顶部选项卡样式
	.swiper-tab-list {
		color: #878787;
		font-size: 30rpx;
		border: 1rpx solid #e5e5e5;
		height: 60rpx;
		line-height: 60rpx;
	}

	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 138rpx;
		height: 100rpx;
		border-bottom: 0;
		text-align: center;
	}

	.uni-swiper-tab .active {
		color: #FFFFFF;
		background-color: #4AC997;
	}

	.dataView {
		// width: 90%;
		margin: 20rpx auto;
		border-radius: 30rpx;
	}

	.dataViewNav {
		padding: 0rpx 20rpx;
		font-size: 35rpx;
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		border-bottom: 1rpx solid #f4f4f4;

		>text:nth-of-type(1) {
			color: #4AC997;
			border-bottom: 5rpx solid #4AC997;
			height: 60rpx;
		}

		>text:nth-of-type(2) {
			font-size: 30rpx;
			color: #007AFF;
		}
	}

	.dataViewBox {
		min-height: 250rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		// justify-content: center;
		align-content: space-around;
		border-bottom: 1rpx solid #dfdfdf;

		>text {
			border-radius: 50rpx;
			min-width: 170rpx;
			text-align: center;
			background-color: #EBEDF4;
			color: #6E6E6E;
			margin: 20rpx;
			padding: 10rpx 15rpx;
			letter-spacing: 4rpx;
		}
	}

	//养殖户
	.farmers {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.farmersButton {
		width: 750rpx;
		height: auto;
		display: flex;
		flex-wrap: wrap;



		view {
			margin: auto;
			width: 350rpx;
			height: 230rpx;
			margin-bottom: 20rpx;
			color: white;
			font-size: 36rpx;
			font-weight: bold;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
		}

		.button1 {
			background: -webkit-linear-gradient(bottom, #9ED35E 30%, #ACD773 50%, #B7DB84 80%);
		}

		.button1:active {
			background-color: #a1db57;
		}

		.button2 {
			background: -webkit-linear-gradient(bottom, #FB8B5C 30%, #F99363 50%, #F5AC7C 80%);
		}

		.button2:active {
			background-color: #eda085;
		}

		.button3 {
			background: -webkit-linear-gradient(bottom, #F1C760 30%, #EFCD76 50%, #EDD288 80%);
		}

		.button3:active {
			background-color: #ddbe75;
		}

		.button4 {
			background: -webkit-linear-gradient(bottom, #7F8BE3 30%, #8E97E8 50%, #9BA7EF 80%);
		}

		.button4:active {
			background-color: #F689A5;
		}

		.button5 {
			background: -webkit-linear-gradient(bottom, #EC8CA6 30%, #EF959C 50%, #F39C94 80%);
		}

		.button5:active {
			background-color: #cf7184;
		}

		.button6 {
			background: -webkit-linear-gradient(bottom, #4FD4B3 30%, #64E1AD 50%, #73EBA8 80%);
		}

		.button6:active {
			background-color: #64bc9a;
		}

		.button7 {
			background: -webkit-linear-gradient(bottom, #FD7B62 30%, #FC8C75 50%, #FC9E89 80%);
		}

		.button7:active {
			background-color: #CD853F;
		}

		.button8 {
			background: -webkit-linear-gradient(bottom, #73B9ED 30%, #73B9ED 50%, #85C8F9 80%);
		}

		.button8:active {}
	}
</style>
